<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form_auth</title>
    <style>
        select {
            border: 0.1px solid #D5E2CB;
            margin-top: 1px;
            width: 100px;
            height: 50px;
            margin-left: -14px;
        }
        a{
            text-decoration: none;
        }
        .cmxform .auth_code{
            padding-right: 100px;
            width: 250px;
        }
        .cmxform .check {
            width: 18px;
            height: 18px;

        }
        .msg{
            display: inline;
            margin-left: -1px;
            margin-top: 23px;
            margin-left: 5px;
        }
        .cmxform button {
            display: block;
            margin-left: 190px;
            width: 300px;
            height: 50px;
            margin-top: 20px;
            zoom: 1;
            vertical-align: baseline;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            background-color: red;
            color: #ffffff;
        }
        .button:hover {
            text-decoration: none;
        }
        .button:active {
            position: relative;
            top: 1px;
        }
        .auth {
            display: inline;
            position: absolute;
            height: 47px;
            width: 104px;
            margin-left: 456px;
            margin-top: 42.5px;
        }

        .cmxform  input {
            margin: 0 auto;
            width: 350px;
            height: 48px;
            border: 1px solid #D5E2CB;
            padding-left: 110px;
            margin-left: 100px;
            margin-top: 40px;
            font-size: 16px;
        }
        p{
            text-align: center;
            line-height: 50px;
            height: 50px;
            display: inline;
            position: absolute;
            margin-left: 115px;
            margin-top: 40px;
        }
        #code{
            margin-top: 40px !important;
        }
        .cmxform {
            width: 800px;
            margin: 0 auto;
        }
        .error{
            color:red;
        }
    </style>
    <script src="jquery-3.4.1/jquery-3.4.1.js"></script>
    <script src="jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script>
        $.validator.setDefaults({
            submitHandler: function() {
                alert("提交事件!");
            }
        });
        $(function(){
            $("#signupForm").validate({
                rules: {
                    new_phone : {
                        required : true,
                        minlength : 11,
                        isMobile : true
                    },
                    check : {
                        required : true
                    },
                    username : {
                        required : true,
                        minlength : 2
                    },
                    password: {
                        required: true,
                        minlength: 8,
                        maxlength: 20
                    },
                    confirm_password: {
                        required: true,
                        minlength: 8,
                        maxlength: 20,
                        equalTo: "#password"
                    },
                    auth_code: {
                        required: true,
                        minlength: 4,
                        maxlength: 4
                    },
                },
                messages: {
                    new_phone : {
                        required : "请输入手机号",
                        minlength : "不能小于11个字符",
                        isMobile : "请正确填写手机号码"
                    },
                    username : {
                        required : "请输入用户名",
                        minlength : "不能小于2个字符",
                    },
                    password : {
                        required : "请输入密码",
                        minlength : "不能小于8个字符",
                        maxlength : "不能多于20个字符"
                    },
                    auth_code : {
                        required : "请输入验证码",
                        minlength : "不能小于4个字符",
                        maxlength : "不能多于4个字符"
                    },
                    check : {
                        required : "请勾选此协议"
                    }
                },
            });
            //手机号码验证
            jQuery.validator.addMethod("isMobile", function(value, element) {
                var length = value.length;
                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                return this.optional(element) || (length == 11 && mobile.test(value));
            }, "请正确填写手机号码");
        })

    </script>
</head>
<body>
<form action="" class="cmxform" id="signupForm">
    <p>用&nbsp&nbsp&nbsp户&nbsp&nbsp&nbsp名</p>
        <input type="text" id="username" name="username" placeholder="您的用户名和登录名"><br>
    <p>设&nbsp置&nbsp密&nbsp码</p>
        <input type="password" id="password" name="password" placeholder="建议至少使用两种字符组合"><br>
    <p>确&nbsp认&nbsp密&nbsp码</p>
        <input type="password" id="confirm_password" name="confirm_password" placeholder="请再次输入密码"><br>

    <p>
        <select>
            <option value="0086">中国  0086</option>
            <option value="0063">英国  0063</option>
            <option value="0052">美国  0052</option>
         </select>
    </p>
    <input type="text" id="new_phone" name="new_phone" placeholder="建议使用常用手机"><br>

    <p id="code">验&nbsp&nbsp证&nbsp&nbsp码

    </p>
    <img class="auth" src="img/2020-05-24_154402.png">
        <input class="auth_code" id="auth_code" name="auth_code" type="text" placeholder="请输入验证码">
   <br>
    <input name="check" id="check" type="checkbox" class="check"><p class="msg">阅读并同意<a href="#">《京东用户注册协议》</a><a href="#">《隐私政策》</a></p>
    <button type="submit" class="button">立即注册</button>
</form>
</body>
</html>